import React,{useState} from 'react'
import login from './styles/login.module.css'
import Navict from '../components/Navict'
import BottomNavict from '../components/BottomNavict'
import { Input, Button } from 'antd'
import classNames from 'classnames'

const Login: React.FC = () => {
    const [isLogin, setIsLogin] = useState(false)
    const handleLogin = (index: boolean) => {
        setIsLogin(index)
    }
    return(
        <div>
            <Navict />
            <div className={login.app}>
                <div className={login.bg_img}>
                    <img src="https://static.zongheng.com/v2017/images/pass/enterzh.png" alt="" />
                </div>
                <div className={login.form}>
                    <div className={login.title}>
                        <div className={classNames({[login.active] : isLogin , [login.un_act] : !isLogin})} onClick={() => handleLogin(true)}>注册</div>
                        <div className={classNames({[login.active_] : !isLogin , [login.un_act] : isLogin})} onClick={() => handleLogin(false)}>登录</div>
                    </div>
                    <Input className={login.input} placeholder="请输入用户名" variant='borderless' />
                    <Input className={login.input} placeholder="请输入密码" variant='borderless' />
                    <Button className={login.btn} type="primary">登录</Button>
                    <div className={login.more}>更多登录敬请期待</div>
                </div>
            </div>
            <div className={login.bottom}>
                <BottomNavict  />
            </div>
        </div>
    )
}

export default Login